<template>
  <div class="productionorder-container">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button :icon="Search" plain type="primary" @click="openQueryDialog">
          查询
        </el-button>
        <el-button
          :icon="DocumentAdd"
          plain
          type="primary"
          @click="openAddDialog"
        >
          新增
        </el-button>
        <el-button
          :disabled="!currentXz"
          :icon="Edit"
          plain
          type="warning"
          @click="openUpdateDialog"
        >
          修改
        </el-button>
        <el-button
          :disabled="!currentXz"
          :icon="CircleCheck"
          plain
          type="danger"
          @click="shenhe"
        >
          审核
        </el-button>
        <el-button
          :disabled="!currentXz"
          :icon="Unlock"
          plain
          type="primary"
          @click="qishen"
        >
          弃审
        </el-button>
        <el-button :icon="Delete" plain type="primary" @click="deleteWc">
          删除
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-table
      :cell-style="{ padding: '2px 0px' }"
      :data="morders"
      highlight-current-row
      :row-class-name="tableRowClassName"
      :row-style="{ fontSize: '8px' }"
      show-summary
      size="small"
      :summary-method="getSummaries"
      @current-change="handleCurrentChange"
    >
      <el-table-column type="index" width="50" />
      <el-table-column label="生产订单" prop="scddh" width="150" />
      <el-table-column label="订单类型" prop="typeName" width="150" />
      <el-table-column label="编码名称" prop="invcode" width="200">
        <template #default="scope">
          <el-row>
            <span>{{ scope.row.invcode }}</span>
          </el-row>
          <el-row>
            <span style="font-size: 16px; font-weight: 700; color: #000">
              {{ scope.row.invname }}
            </span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="规格" prop="invspec" width="250">
        <template #default="scope">
          <el-row>
            <span style="font-size: 16px; font-weight: 700; color: #000">
              {{ scope.row.invspec }}
            </span>
          </el-row>
          <el-row>
            <span>
              {{ scope.row.invtype }}
            </span>
          </el-row>
        </template>
      </el-table-column>

      <el-table-column
        label="部门"
        prop="deptName"
        style="font-size: 15px; font-weight: 600; color: #000"
        width="150"
      >
        <template #default="scope">
          <span style="font-size: 15px; font-weight: 600; color: #000">
            {{ scope.row.deptName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="计划数量" prop="jhwgsl" width="150">
        <template #default="scope">
          <span style="font-size: 16px; font-weight: 600; color: #5314bd">
            {{ scope.row.jhwgsl }}&nbsp;{{ scope.row.measName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="审核" width="100">
        <template #default="scope">
          <el-icon v-if="scope.row.state === 0" color="#DF3730" size="20">
            <SemiSelect />
          </el-icon>
          <el-icon v-if="scope.row.state === 1" color="#30DF80" size="20">
            <Select />
          </el-icon>
          <div v-else></div>
        </template>
      </el-table-column>
      <el-table-column label="投产" width="100">
        <template #default="scope">
          <el-icon v-if="scope.row.isTc" color="#30DF80" size="20">
            <Select />
          </el-icon>
          <el-icon v-else color="#DF3730" size="20">
            <SemiSelect />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column label="创建信息" width="250">
        <template #default="scope">
          <el-row>
            <span style="font-size: 16px; font-weight: 700; color: #000">
              {{ scope.row.createUser }}
            </span>
          </el-row>
          <el-row>
            <span>
              {{ scope.row.createTime }}
            </span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="审核信息" width="250">
        <template #default="scope">
          <el-row>
            <span style="font-size: 16px; font-weight: 700; color: #000">
              {{ scope.row.shenheUser }}
            </span>
          </el-row>
          <el-row>
            <span>
              {{ scope.row.shenheTime }}
            </span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="投产信息" width="250">
        <template #default="scope">
          <el-row>
            <span style="font-size: 16px; font-weight: 700; color: #000">
              {{ scope.row.tcUser }}
            </span>
          </el-row>
          <el-row>
            <span>
              {{ scope.row.tcTime }}
            </span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" width="200" />
    </el-table>
    <el-pagination
      background
      :current-page="paginationParams.pageNum"
      :layout="layout"
      :page-size="paginationParams.pageSize"
      :total="paginationParams.total"
      @current-change="handlePaginationCurrentChange"
      @size-change="handlePaginationSizeChange"
    />
    <addOrderDialog ref="addOrderDialogRef" @success-callback="addCallback" />
    <queryDialog ref="queryDialogRef" @success-callback="queryCallback" />
    <updateDialog ref="updateDialogRef" @success-callback="updateCallback" />
  </div>
</template>

<script setup>
  import {
    Search,
    DocumentAdd,
    CircleCheck,
    Unlock,
    Delete,
    Select,
    SemiSelect,
    Edit,
  } from '@element-plus/icons-vue'
  import addOrderDialog from './modules/addOrderDialog.vue'
  import queryDialog from './modules/queryDialog.vue'
  import { getMorderPageApi, shenHeApi, qishenApi } from '@/api/mes/morder_api'
  import { localStorageConfig } from '@/config/localstorage.config'
  import updateDialog from './modules/updateDialog.vue'

  const $baseLoading = inject('$baseLoading')
  const $baseMessage = inject('$baseMessage')

  const morders = ref()
  const addOrderDialogRef = ref()
  const queryDialogRef = ref()
  const updateDialogRef = ref()
  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)

  const paginationParams = reactive({
    pageNum: 1,
    pageSize: 20,
    total: 0,
  })

  const queryForm = ref({ pkCorp: pkCorp })

  const currentXz = ref()

  const openQueryDialog = () => queryDialogRef.value.openDialog()

  const openAddDialog = () => addOrderDialogRef.value.openDialog()

  const queryCallback = (form) => {
    queryForm.value = form
    getMorder()
  }

  const addCallback = () => getMorder()

  const getMorder = async () => {
    let params = {
      ...paginationParams,
      ...queryForm.value,
    }
    const load = $baseLoading()
    try {
      const res = await getMorderPageApi(params)
      if (res.code === 2000) {
        $baseMessage(res.msg, 'success')
        morders.value = res.data.list
        paginationParams.total = res.data.total
      } else {
        $baseMessage(res.msg, 'error')
      }
    } finally {
      load.close()
    }
  }

  const handleCurrentChange = (rowData) => (currentXz.value = rowData)

  const openUpdateDialog = () => {
    if (currentXz.value.state != 0) {
      $baseMessage('开立的单据才可以修改', 'warning')
      return
    }
    if (currentXz.value) {
      updateDialogRef.value.openDialog(currentXz.value)
    } else {
      $baseMessage('请选择需要修改的数据', 'warning')
    }
  }

  const shenhe = async () => {
    const load = $baseLoading()
    try {
      if (currentXz.value.state != 0) {
        $baseMessage('开立的单据才可以审核', 'warning')
        return
      }
      let params = {
        pkMorder: currentXz.value.pkMorder,
      }
      const { code, msg } = await shenHeApi(params)
      if (code === 2000) {
        $baseMessage(msg, 'success')
        getMorder()
      } else {
        $baseMessage(msg, 'error')
      }
    } finally {
      load.close()
    }
  }

  const qishen = async () => {
    const load = $baseLoading()
    try {
      if (currentXz.value.isTc) {
        $baseMessage('已经投产的订单不可以弃审', 'warning')
        return
      }
      if (currentXz.value.state != 1) {
        $baseMessage('单据不是审核状态，不需要弃审', 'warning')
        return
      }
      let params = {
        pkMorder: currentXz.value.pkMorder,
      }
      const { code, msg } = await qishenApi(params)
      if (code === 2000) {
        $baseMessage(msg, 'success')
        getMorder()
      } else {
        $baseMessage(msg, 'error')
      }
    } finally {
      load.close()
    }
  }

  //#region pagintion 开始
  const layout = ref('total, sizes, prev, pager, next, jumper')
  const handlePaginationCurrentChange = (...args) => {
    paginationParams.pageNum = args[0] ? args[0] : 1
    getMorder()
  }
  const handlePaginationSizeChange = (...args) => {
    paginationParams.pageSize = args[0] ? args[0] : 20
    paginationParams.pageNum = 1
    getMorder()
  }
  //#endregion

  // watch(paginationParams, () => getMorder())

  onMounted(() => getMorder())
</script>
